<template>
  <div>
    <el-form>
      <el-input type="text" v-model="article.title"></el-input>
      <div id="editor"></div>
      <el-button @click="onSubmit">提交</el-button>
      <textarea v-model="article.content" id="text"></textarea>
    </el-form>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

export default {
  name: 'Editor',
  data () {
    return {
      article: {
        content: '',
        title: ''
      }
    }
  },
  mounted () {
    // eslint-disable-next-line new-cap
    const editor = new wangEditor('#editor')
    editor.config.height = 500
    editor.config.onchange = html => {
      this.article.content = html
    }
    editor.config.languageType = [
      'Bash',
      'C',
      'C#',
      'C++',
      'CSS',
      'Java',
      'JavaScript',
      'JSON',
      'TypeScript',
      'Plain text',
      'Html',
      'XML',
      'SQL',
      'Go',
      'Kotlin',
      'Lua',
      'Markdown',
      'PHP',
      'Python',
      'Shell Session',
      'Ruby'
    ]
    editor.highlight = hljs
    editor.create()
    this.text = editor.txt.html()
  },
  methods: {
    onSubmit () {
      this.$axios({
        url: 'add_article',
        method: 'POST',
        data: this.article,
        headers: {
          satoken: this.$store.state.token
        }
      }).then(resp => {
        console.log(resp.data)
        alert(resp.data.message)
      })
    }
  }
}
</script>

<style scoped>

</style>
